<template>
  <el-container class="home">
    <el-header>
      <div class="header-logo">
        <img style="height: 40px" src="@/assets/logo.png" alt="" />
        <h1>电商后台管理系统</h1>
      </div>
      <div class="out-btn">
        <span class="welcome">{{ getUserName }}</span>
        <button @click="logOut">退出</button>
      </div>
    </el-header>
    <el-container>
      <el-aside :class="{ setCollapse: isCollapse }" width="200px">
        <left-menu @outCollapse="isCollapseBtn"></left-menu>
      </el-aside>
      <el-main>
        <el-breadcrumb
          v-show="$route.path != '/welcome'"
          separator-class="el-icon-arrow-right"
        >
          <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
          <el-breadcrumb-item>{{getMenuObj.val1}}</el-breadcrumb-item>
          <el-breadcrumb-item>{{getMenuObj.val2}}</el-breadcrumb-item>
        </el-breadcrumb>
        <router-view></router-view>
      </el-main>
    </el-container>
  </el-container>
</template>

<script>
// @ is an alias to /src
import leftMenu from "@/components/leftMenu.vue";
import { mapGetters } from "vuex";
export default {
  name: "Home",
  data() {
    return {
      isCollapse: false,
    };
  },
  methods: {
    isCollapseBtn(val) {
      this.isCollapse = val;
    },
    myMessage(type, text) {
      this.$message({
        type: type,
        message: text,
      });
    },
    async logOut() {
      let res = await this.$confirm("此操作将退出登录, 是否继续?", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).catch(() => {});
      if (!res) return this.myMessage("info", "取消退出");
      window.localStorage.removeItem("myToken");
      this.$router.replace({ path: "/login" });
      this.myMessage("success", "退出成功");
    },
  },
  computed: {
    ...mapGetters(["getUserName","getMenuObj"]),
  },
  components: {
    leftMenu,
  },
};
</script>

<style lang="less" scoped>
.home {
  height: 100%;
  .el-header {
    background-color: #373d41;
    color: #333;
    text-align: center;
    line-height: 60px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    color: #fff;
    .header-logo {
      display: flex;
      align-items: center;
      img {
        height: 40px;
      }
      h1 {
        font-size: 20px;
        margin-left: 10px;
      }
    }
    .out-btn {
      span {
        margin-right: 20px;
      }
      button {
        color: #fff;
        border: none;
        background-color: #909399;
        border-radius: 7px;
        padding: 10px 20px;
        cursor: pointer;
        &:hover {
          background-color: #a6a9ad;
        }
        &:active {
          background-color: #82848a;
        }
      }
    }
  }
  .el-container {
    .el-aside {
      background-color: #333744;
      &.setCollapse {
        width: 64px !important;
      }
    }
    .el-main {
      padding: 15px;
      background-color: #d3dce6;
      .el-breadcrumb {
        margin: 0;
        display: flex;
        align-items: center;
      }
    }
  }
}
</style>
